import { Col, Row } from 'antd'
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { getProductId } from '../../store/actions/product.action'
import { AppState } from '../../store/reducers'
import { ProductState } from '../../store/reducers/product.reducer'
import Layout from './Layout'
import ProductItem from './ProductItem'

const Product = () => {
  const dispatch = useDispatch()
  const {productId} = useParams<{productId:string}>()
  const {product} = useSelector<AppState,ProductState>(state=>state.product)
  useEffect(()=>{
    dispatch(getProductId({productId}))
  },[])
  return (
    <Layout title="商品详情" subTitle="">
      <Row gutter={36}>
        <Col span="16">
          <ProductItem showViewProduct={false} product={product.result} />
        </Col>
        <Col span="8">
          right
        </Col>
      </Row>
    </Layout>
  )
}
export default Product